Fixes #185

Problem

Google Search Console flagged Cumulative Layout Shift (CLS) on 8 pages. CLS happens when
elements move around after the page first loads — it hurts the user experience and drops
Core Web Vitals scores.

I dug into the codebase and found three things causing this.

What I Found and Fixed

1. Discord Stats were starting as null

The community stats on the homepage (online count, channels, voice) were initialized as
null. So on first load the section was empty, then the numbers appeared after the API call
finished and pushed everything below it downward.

Fixed by initializing the stats as 0 instead of null. The space is reserved from the
start, numbers just update in place.

File changed: app/(core)/components/FullLandingPage.tsx

2. Google Translate was shifting the entire body

When someone switches language, Google Translate injects a 40px toolbar into the page and
moves the body down to make room. Everything on screen jumps. This was happening on all 8
reported pages because they all share the same Header with the translator widget.

Fixed by hiding the injected elements and overriding the body offset in CSS.

File changed: app/(core)/styles/translator.css

3. Stat labels were resizing as numbers loaded

When stat values changed from 0 to real numbers, the label containers grew in width and
nudged neighboring elements sideways.

Fixed by adding a min-width to the stat labels so the container size stays consistent.

File changed: app/(core)/styles/landing.css

Which pages are affected by which fix

The 8 affected pages are split into two groups based on what was causing their CLS.

Homepage — /

This page gets all 3 fixes because it is the only page that loads the Discord
community stats section. The layout was shifting in three different ways here —
the stats popping in, the Google Translate banner pushing the body, and the stat
labels resizing. All three are now resolved.

Simulation and Blog pages

These 7 pages only get the Google Translate fix:

Simulations
- /simulations/BouncingBall
- /simulations/BallGravity
- /simulations/SimplePendulum
- /simulations/SpringConnection
- /simulations/VectorsOperations

Blog
- /blog/physics-bouncing-ball-comprehensive-educational-guide
- /blog/comprehensive-guide-to-vector-operations

These pages do not have Discord stats, so the stats and label width fixes do not
apply to them. However, they all share the same Header component which includes
the Google Translate widget — meaning the Translate banner was shifting the body
on all of them. Since translator.css is a global stylesheet loaded on every page,
this single fix covers all 8 URLs at once.